<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button @click="toBillDetail" style="width: 100px">查看单据详情</el-button>
        <el-button @click="exportExcel">导出</el-button>
        <el-button @click="handleShortcutKeyPrint">打印(P)</el-button>
      </div>
      <div class="btn_right">
        <el-select @change="changeDate" v-model="monthValue">
          <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-date-picker
          v-model="nowDate"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="onClickPicker"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-button type="primary" @click="getDataList(1)">查询</el-button>
        <el-button @click="onRefresh()">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="params_view">
        <div class="column_item">
          <div class="row_item">
            <span class="text">往来单位</span>
            <el-tooltip
              :disabled="queryData.companyName.length <= 6"
              effect="dark"
              :content="queryData.companyName"
              :enterable="false"
              placement="bottom-start"
            >
              <el-select
                v-model="queryData.xghCompanyId"
                ref="wanglaidanwei"
                @change="onChangeCompany"
                filterable
                @visible-change="(value) => handleFilterMethod('', 'companyName')"
                :filter-method="(value) => handleFilterMethod(value, 'companyName')"
              >
                <el-option
                  style="font-size: 12px; height: 28px"
                  v-for="item in wldwOptions"
                  :key="item.id"
                  :label="item.companyName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-tooltip>
          </div>
          <div class="row_item">
            <span style="font-weight: 500">此前应收款：</span>
            <span style="font-weight: 600">￥{{ $formatMoney(totalPrice.totalCollectionPrice) }}</span>
          </div>
        </div>
        <div class="column_item">
          <div class="row_item">
            <span class="text">经手人</span>
            <el-select
              v-model="queryData.sysUserId"
              ref="jingshouren"
              filterable
              @visible-change="(value) => handleFilterMethod('', 'realname')"
              :filter-method="(value) => handleFilterMethod(value, 'realname')"
              @change="getDataList(1)"
            >
              <el-option
                style="font-size: 12px; height: 28px"
                v-for="item in jsrOptions"
                :key="item.id"
                :label="item.realname"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="row_item">
            <span style="font-weight: 500">此前应付款：</span>
            <span style="font-weight: 600">￥{{ $formatMoney(totalPrice.totalPaymentPrice) }}</span>
          </div>
        </div>
        <div class="column_item">
          <div class="row_item">
            <span class="text">过滤记录</span>
            <el-select placeholder v-model="queryData.reconciliationFlag" @change="getDataList(1)">
              <el-option
                style="font-size: 12px; height: 28px"
                v-for="item in gljlOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="row_item">
            <span style="font-weight: 500">此前余款：</span>
            <span style="font-weight: 600; color: #ff6c00">￥{{ $formatMoney(totalPrice.totalBalance) }}</span>
          </div>
        </div>
        <div class="column_item">
          <div class="row_item">
            <el-checkbox v-model="queryData.hideRedRush" @change="getDataList(1)">隐藏红冲单据</el-checkbox>
          </div>
        </div>
      </div>
      <div class="div_table">
        <div class="table_content">
          <el-table
            ref="table1"
            show-summary
            border
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData"
            height="100%"
            style="width: 100%"
            @row-click="onClickRow"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                border
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="130px"
                :sortable="item.sortable"
                :resizable="item.props=='goodsName' ?true:false"
                :width="
                  ['createOrderDate', 'orderNumber'].includes(item.props) || index == 1
                    ? '170px'
                    : item.props == 'xh'
                    ? '50px'
                    : ''
                "
              >
                <template slot-scope="scope">
                  <!-- <el-checkbox
                    v-model="scope.row.reconciliationFlag"
                    v-if="item.props == 'reconciliationFlag'"
                    @change="billReconciliation(scope.row, scope.$index)"
                  ></el-checkbox> -->
                  <span v-if="item.props == 'reconciliationFlag'">
                    <el-checkbox
                      v-model="scope.row.reconciliationFlag"
                      v-if="!['27', '28'].includes(scope.row.orderType)"
                      @change="billReconciliation(scope.row, scope.$index)"
                    ></el-checkbox>
                  </span>
                  <span
                    v-else-if="item.props == 'goodsName'"
                    style="
                      width: 100%;
                      white-space: normal;
                      word-wrap: break-word;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      text-align: left;
                    "
                    >{{ scope.row[item.props] }}</span
                  >
                  <span
                    v-else-if="monArr.includes(item.props)"
                    :style="{
                      color: scope.row.reconciliationFlag || scope.row.orderStatus == '20' ? '#f5222d' : '#666',
                    }"
                  >
                    {{ $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span v-else-if="numArr.includes(item.props)">
                    {{ $formatNumber(scope.row[item.props]) }}
                  </span>
                  <span v-else-if="uniArr.includes(item.props)">
                    {{ $formatPrice(scope.row[item.props]) }}
                  </span>
                  <span
                    v-else
                    :style="{
                      color: scope.row.reconciliationFlag || scope.row.orderStatus == '20' ? '#f5222d' : '#666',
                    }"
                  >
                    {{ scope.row[item.props] }}
                  </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pagesize"
            layout="jumper, prev, pager,next, sizes"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 选择往来单位弹框 -->
    <!-- <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier> -->
    <!-- 新增往来单位弹框 -->
    <!-- <DialogSupplierAdd ref="supplierAddRef" @onAddSubmit="onAddSupplier"></DialogSupplierAdd> -->
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="应付汇总"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogSupplier from '../../components/dialogSupplier'
import DialogSupplierAdd from '../../components/dialogSupplierAdd'
import { getAction, postAction, downPostFile } from '@/api/manage'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import { getTreeAllSubId } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// 导入调用处理权限数据方法
import {
  handlePermissions,
  handleOtherPerms,
  sysConfig,
  getSystemParamsByName,
  formatMoney,
  formatPrice,
  formatNumber,
  delcommafy,
  handleArrayToObject,
  handleObjectToArray,
} from '@/utils/index'
export default {
  name: 'reconciliationDetails',
  components: {
    CConfiguration,
    DialogSupplier,
    DialogSupplierAdd,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    console.log('往来对账按明细-created')
    if (this.$route.params) {
      this.queryData.xghCompanyId = this.$route.params.companyId || ''
    }
    this.getTimeRange(this.$setTimeRange(5))
    this.getData()
  },
  watch: {
    // 路由变化时，更新数据
    // $route: {
    //   immediate: true,
    //   handler (val) {
    //     if (val.name === 'reportStatistics-paymentReport-reconciliationDetails') {
    //       console.log(val)
    //       this.queryData.xghCompanyId = val.params.companyId || ''
    //       if (!this.queryData.beginDate) {
    //         this.getTimeRange(this.$setTimeRange(5))
    //       }
    //       this.getData()
    //     }
    //   }
    // },
  },
  data() {
    return {
      // 统计类型
      gljlOptions: [
        {
          value: undefined,
          label: '全部显示',
        },
        {
          value: '1',
          label: '只显示已对账',
        },
        {
          value: '0',
          label: '只显示未对账',
        },
      ],
      // 往来单位
      wldwOptions: [],
      jsrOptions: [],
      queryData: {
        hideRedRush: true,
        sysUserId: '',
        xghCompanyId: '',
        companyName: '',
        reconciliationFlag: undefined,
      },
      // 表格数据
      tableData: [],
      defaultColumnData: [],
      // 列配置数据
      columnData: [
        {
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: true,
          props: 'xh',
        },
        {
          morenName: '发生日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'createOrderDate',
        },
        {
          morenName: '单据日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'createOrderDate',
        },
        {
          morenName: '单据类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'orderType_dictText',
        },
        {
          morenName: '单据编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'orderNumber',
        },
        {
          morenName: '往来单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'xghCompanyId_dictText',
        },
        {
          morenName: '物流公司',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'xghExpressId_dictText',
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'xghSysUserId_dictText',
        },
        {
          morenName: '制单人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'createUserId_dictText',
        },
        {
          morenName: '商品编码',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'goodsNumber',
        },
        {
          morenName: '商品名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'goodsName',
        },
        {
          morenName: '商品规格',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'norms',
        },
        {
          morenName: '单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'unit',
        },
        {
          morenName: '数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'number',
        },
        {
          morenName: '单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'price',
        },
        {
          morenName: '折后单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'discountUnitPrice',
        },
        {
          morenName: '含税单价',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'taxUnitPrice',
        },
        {
          morenName: '款项类型',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'settlementType',
        },
        {
          morenName: '应收发生额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'collectionHappenPrice',
        },
        {
          morenName: '应收余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'collectionBalance',
        },
        {
          morenName: '应付发生额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'paymentHappenPrice',
        },
        {
          morenName: '应付余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'paymentBalance',
        },
        {
          morenName: '核销后余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'settlementBalance',
        },
        {
          morenName: '对账标记',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'reconciliationFlag',
        },
        {
          morenName: '对账日期',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'reconciliationDate',
        },
        {
          morenName: '对账人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'reconciliationBy_dictText',
        },
        {
          morenName: '单据状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          sortable: true,
          props: 'orderStatus_dictText',
        },
        {
          morenName: '单据备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'remark',
        },
        {
          morenName: '商品条码二',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'goodsCode',
        },
      ],
      allArr: [
        'collectionHappenPrice',
        'paymentHappenPrice',
        'settlementBalance',
        'number',
        'price',
        'discountUnitPrice',
        'taxUnitPrice',
        'collectionBalance',
        'paymentBalance',
      ],
      monArr: [
        'collectionHappenPrice',
        'paymentHappenPrice',
        'settlementBalance',
        'collectionBalance',
        'paymentBalance',
      ],
      numArr: ['number'],
      uniArr: ['price', 'discountUnitPrice', 'taxUnitPrice'],
      nowDate: [],
      // 月份选择
      monthValue: '本月',
      monthOptions: ['当前账期', '今日', '昨天', '本周', '上周', '本月', '上月', '本年', '去年'],
      // 类别数据
      updateId: '', // 修改列配置时返回的id
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      countFlag: 1, // 1-按往来单位 2-按业务员
      api: '往来对账(按明细)',
      totalPrice: {
        totalBalance: '0.00',
        totalCollectionPrice: '0.00',
        totalPaymentPrice: '0.00',
      },
      total: 0,
      userInfo: Vue.ls.get(USER_INFO),
      selectRow: null,
      url: {
        exportXlsUrl: '/xghCollectionPay/xghCollectionPay/exportDetailForPayAndCollectionlXls',
      },
      billName: '往来对账(按明细)',
    }
  },

  methods: {
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let params = {
        ...this.queryData,
        pageSize: 1000000,
        pageNo: 1,
      }
      let printExclusive = []
      let url = '/xghCollectionPay/xghCollectionPay/queryDetailForPayAndCollection'
      let res = await getAction(url, params)
      if (res.code == 200) {
        printExclusive = (res.result && res.result.records) || []
        printExclusive.forEach((item, index) => {
          item.collectionHappenPrice = formatMoney(item.collectionHappenPrice)
          item.paymentHappenPrice = formatMoney(item.paymentHappenPrice)
          item.settlementBalance = formatMoney(item.settlementBalance)
          item.collectionBalance = formatMoney(item.collectionBalance)
          item.paymentBalance = formatMoney(item.paymentBalance)
          item.number = formatNumber(item.number)
          item.price = formatPrice(item.price)
          item.discountUnitPrice = formatPrice(item.discountUnitPrice)
          item.taxUnitPrice = formatPrice(item.taxUnitPrice)
          item.xh = index + 1
          item.kxlx = this.getTextByOrderNumber(item.orderNumber)
          item.reconciliationFlag = item.reconciliationFlag == 1 ? '已标记' : '未标记'
        })
      }
      // 打印
      // if (!this.buttonsPermissions.DaYin) {
      //   this.$elMessage.warning('未拥有打印权限！')
      // } else
      if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.beginDate + '~' + this.queryData.endDate,
          wanglaidanwei: this.$refs.wanglaidanwei.selected.label,
          jingshouren: this.$refs.jingshouren.selected.label,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, () => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            })
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      this.getTimeRange(this.$setTimeRange(5))
      this.getData()
    },
    // 获取数据
    getData() {
      this.getGysStorage()
      this.getStaffData()
      this.selectTitle()
      this.getDataList(1)
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '当前账期':
          this.getTimeRange({
            now: '',
            end: '',
          })
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.beginDate = data.now
      this.queryData.endDate = data.end
      console.log('-----')
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.beginDate = val[0]
      this.queryData.endDate = val[1]
    },
    onClickRow(row) {
      this.selectRow = row
    },
    toBillDetail() {
      if (!this.selectRow) {
        this.$elMessage.warning('请选择要查看的单据！')
      } else {
        let name = this.getBillNameByNumber(this.selectRow.orderNumber)
        if (name) {
          let id = this.selectRow.orderId
          this.$router.push({ name: name, params: { source: 'bill', billId: id } })
        } else {
          this.$elMessage.warning('暂不支持查看该单据')
        }
      }
    },
    getBillNameByNumber(orderNumber) {
      if (!orderNumber) {
        return ''
      }
      let data = {
        xsckd: 'saleManage-salesBill-billSalesDelivery',
        xsthd: 'saleManage-salesBill-billSalesReturn',
        xshhd: 'saleManage-salesBill-billSalesExchange',
        cgrkd: 'purchaseManage-purchaseBill-billPurchaseWarehousing',
        cgthd: 'purchaseManage-purchaseBill-billPurchaseReturn',
        cghhd: 'purchaseManage-purchaseBill-billPurchaseExchange',
        fkjsd: 'paymentManage-paymentBill-billPaymentSettlement',
        skjsd: 'paymentManage-paymentBill-billCollectionSettlement',
        yskzj: 'adjustmentMemo-adjustmentBill-billIncreaseInReceivables',
        yskjs: 'adjustmentMemo-adjustmentBill-billDecreaseInReceivables',
        yfkzj: 'adjustmentMemo-adjustmentBill-billIncreaseInPayable',
        yfkjs: 'adjustmentMemo-adjustmentBill-billDecreaseInPayable',
      }
      let keys = Object.keys(data)
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index]
        if (orderNumber.indexOf(key) > -1) {
          return data[key]
        }
      }
      return ''
    },
    /**
     * 获取供应商数据
     */
    getGysStorage() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.wldwOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    /**
     * 获取所有员工数据
     */
    async getStaffData() {
      getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
        if (res.code === 200) {
          this.jsrOptions = res.result
          this.totalPersons = res.result
        }
      })
    },
    // 打开选择往来单位弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      this.queryData.wldw = val.id
      this.getDataList(1)
    },
    // 获取线上的列配置
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    billReconciliation(row, index) {
      let params = {
        collectionPayId: row.collectionPayId,
        reconciliationBy: this.userInfo.id,
        reconciliationFlag: row.reconciliationFlag ? '1' : '0',
      }
      getAction('/xghCollectionPay/xghCollectionPay/reconciliation', params).then((res) => {
        if (res.success) {
          let result = res.result
          let item = this.tableData[index]
          item.reconciliationBy = result.reconciliationBy
          item.reconciliationBy_dictText = result.reconciliationBy_dictText
          item.reconciliationDate = result.reconciliationDate
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    /**
     *  查询应收应付列表
     */
    getDataList(page) {
      this.selectRow = null
      if (page == 1) {
        this.currentPage = 1
      }
      let params = {
        ...this.queryData,
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      console.log('-----++++')
      let url = '/xghCollectionPay/xghCollectionPay/queryDetailForPayAndCollection'
      getAction(url, params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.records || []
          this.total = res.result.total
          this.tableData.forEach((item, index) => {
            item.xh = index + 1
            item.kxlx = this.getTextByOrderNumber(item.orderNumber)
            item.reconciliationFlag = item.reconciliationFlag == 1
          })
          this.$nextTick(() => {
            this.$refs.table1.doLayout()
          })
        }
      })
      getAction('/xghCollectionPay/xghCollectionPay/sumPayAndCollectionPrice', params).then((res) => {
        if (res.code == 200) {
          console.log('totalBalance', res)
          let obj = res.result || {}
          this.totalPrice = obj
          this.$nextTick(() => {
            this.$refs.table1.doLayout()
          })
        }
      })
    },
    getTextByOrderNumber(orderNumber) {
      let options = {
        xsckd: '销售应收款',
        xshhd: '销售退换货款',
        xsthd: '销售退货款',
        cgrkd: '采购应付款',
        cghhd: '采购退换货款',
        cgthd: '采购退货款',
        fkjsd: '采购预付款',
        skjsd: '客户预付款',
        yskzj: '调账(应收款增加)',
        yskjs: '调账(应收款减少)',
        yfkzj: '调账(应付款增加)',
        yfkjs: '调账(应付款减少)',
      }
      let keys = Object.keys(options)
      for (let index = 0; index < keys.length; index++) {
        const key = keys[index]
        if (orderNumber.indexOf(key) > -1) {
          return options[key]
        }
      }
      return ''
    },

    // 导出
    exportExcel() {
      let fileName = '往来对账（按明细）'
      let queryParam = {
        ...this.queryData,
        fileName: fileName,
      }
      this.handleExportXlsByStaff(fileName, queryParam)
    },

    // 到别处看看
    checkup(type) {
      let path = '/reportStatistics/paymentReport/accountsReceivable'
      if (type == 1) {
        path = '/reportStatistics/paymentReport/arAndapSummary'
      }
      this.$router.push({ path: path })
    },

    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else if (this.allArr.includes(column.property)) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (this.monArr.includes(column.property)) {
              sums[index] = this.$formatMoney(sums[index])
            } else if (this.numArr.includes(column.property)) {
              sums[index] = this.$formatNumber(sums[index])
            } else {
              sums[index] = this.$formatPrice(sums[index])
            }
          } else {
            sums[index] = ''
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getDataList(1)
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'companyName') {
        this.wldwOptions = this.filterMethod(this.wldwOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      }
    },
    // 下拉选择往来单位
    onChangeCompany(val) {
      this.queryData.companyName = this.wldwOptions.find((item) => item.id === val).companyName
      this.getDataList(1)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  ::v-deep .el-button {
    padding: 0 10px;
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 0.1rem;
    border: none;
    margin-right: 10px;
    margin-left: 0;
  }

  .el-button--default {
    color: #666;
  }

  .el-button--default:hover {
    background-color: #fff;
  }

  ::v-deep .el-select {
    width: 80px;
    height: 30px;

    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: 30px;
        border: 1px solid #d9d9d9;
        font-size: 12px;
        padding: 0 20px 0 5px;
      }

      .el-input__suffix {
        height: 30px;
        width: 20px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-date-editor {
    width: 220px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    margin-right: 0.112507rem;
    padding: 3px 6px;

    .el-range__icon {
      position: absolute;
      right: 0;
      line-height: 30px;
    }

    .el-range-separator {
      line-height: 24px;
    }

    .el-range-input {
      font-size: 12px;
    }

    .el-range__close-icon {
      display: none;
    }
  }

  .btn_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.params_view {
  margin: 10px 6px;
  display: flex;

  ::v-deep .el-select {
    width: 160px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 4px;

    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 0.15rem;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-checkbox {
    display: flex;
    align-items: center;
    margin-right: 0.25rem;

    .el-checkbox__input {
      height: 14px;
    }

    .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
      color: #666;
    }

    .is-checked {
      .el-checkbox__inner {
        background: #1a93fa;
        border-color: #1a93fa;
      }
    }
  }

  .column_item {
    margin-right: 25px;
  }

  .row_item {
    padding: 10px 0;
    height: 40px;
    display: flex;
    align-items: center;

    .text {
      margin-right: 10px;
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;

  .div_table {
    width: 100%;
    height: calc(100% - 160px);
    margin-top: 10px;
    display: flex;
    box-sizing: border-box;

    .table_content {
      width: 100%;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          // color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          &:last-child {
            border-right: none;
          }
        }

        .el-table-column--selection {
          .cell {
            padding: 0;
            text-align: center;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .cell {
          line-height: 30px;
          font-size: 12px;
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        // td选择框颜色修改
        .is-checked {
          .el-checkbox__inner {
            color: #1b93f9;
            background-color: #1b93f9;
            border-color: #1b93f9;
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .new_table_content {
      width: 100%;
      margin-left: 0;
    }
  }

  .table_pagination {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0.168761rem 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 30px;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>